import React from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import styles from './CustomTabbar.module.css';

interface TabItem {
  path: string;
  title: string;
  icon: React.ReactNode;
}

interface CustomTabbarProps {
  tabs: TabItem[];
}

const CustomTabbar: React.FC<CustomTabbarProps> = ({ tabs }) => {
  const navigate = useNavigate();
  const location = useLocation();

  const handleTabClick = (path: string) => {
    navigate(path);
  };

  return (
    <div className={styles.tabbarContainer}>
      <div className={styles.tabbar}>
        {tabs.map((tab, index) => (
          <div
            key={tab.path}
            className={`${styles.tabItem} ${location.pathname === tab.path ? styles.active : ''}`}
            onClick={() => handleTabClick(tab.path)}
          >
            <div className={styles.iconContainer}>
              {tab.icon}
            </div>
            <span className={styles.tabText}>{tab.title}</span>
          </div>
        ))}
      </div>
    </div>
  );
};

export default CustomTabbar;
